import React, { memo } from "react";
import { NavLink } from "react-router-dom";
import { ArtistLeftStyle } from "./style";
import classNames from "classnames";
import { useDispatch } from "react-redux";
import {
  changeCurrentTypeAction,
  changeCurrentAreaAction,
} from "../../../pages/discover/d-pages/artist/store/actionType";
import { artistCategories } from "@/services/local-data";

export default memo(function ArtistLeft(props) {
  const locationArea =
    props.location.search.split(/\?\S*?=/)[3] + "" === "undefined"
      ? 7
      : props.location.search.split(/\?\S*?=/)[3];
  const locationType =
    props.location.search.split(/\?\S*?=/)[2] + "" === "undefined"
      ? 1
      : props.location.search.split(/\?\S*?=/)[2];

  const dispatch = useDispatch();

  const selectArtist = (area, type) => {
    dispatch(changeCurrentAreaAction(area));
    dispatch(changeCurrentTypeAction(type));
  };

  const renderArtist = (artists, area) => {
    return (
      <ul>
        {artists.map((item, index) => {
          const isSelect = locationArea == area && locationType == item.type;
          return (
            <li className={classNames({ active: isSelect })} key={item.name}>
              <NavLink
                to={{
                  pathname: "/discover/artist/cat",
                  search:
                    "?id=" + item.url + "?type=" + item.type + "?area=" + area,
                }}
                onClick={(e) => selectArtist(area, item)}
              >
                {item.name}
              </NavLink>
            </li>
          );
        })}
      </ul>
    );
  };
  return (
    <ArtistLeftStyle>
      <div className="artist-left-box">
        <div className="artist-left-ul">
          {artistCategories.map((item, index) => {
            return (
              <div className="artist-left-ul-box" key={item.title}>
                <div className="artist-left-title">{item.title}</div>
                {renderArtist(item.artists, item.area)}
              </div>
            );
          })}
        </div>
      </div>
    </ArtistLeftStyle>
  );
});
